<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../../css/mui.css"/>
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../css/general.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/mui.picker.min.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/mui.poppicker.css"/>
		<style type="text/css">
			.atime{
				width: 100%;	
				display: flex;
				justify-content: space-between;
				align-items: center;
				background-color: white;
			}
			.atime>div{
				padding: 10px 20px;	
			}
			.atable{
				width: 100%;
			}
			table{
				width: 100%;
				margin: 20px auto;
				border-radius: 20px;
				background-color: white;
				font-size: 0.8em;
				font-family: "微软雅黑";
			}
			tr{
				text-align: center;
			}
			td{
				width: 20%;
				text-align: center;
				padding: 0.4em 0;
			}
			.bbt{
				border-bottom: 1px solid #C7C7CC;
			}
			.theader{
				width: 100%;
				background-color: #0076FF;
				color: white;
			}
			.theader>td{
				color: white;
				padding: 0.6em 0;
			}
			.blr{
				border-top-left-radius: 20px;
			}
			.brr{
				border-top-right-radius: 20px;
			}
			.footdiv>div{
				width: 33.3%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.dbr{
				border-right: 1px solid #C7C7CC;
			}
			.mui-input-row .mui-btn {
			    float: right;
			    width: 60%;
			    padding: 11px 15px;
			}
			.borbot{
				border-bottom: 1px solid #BBBBBB;
			}
			.place button{
				width:100%;
				color: #676664 !important;
			    border: 0 !important;
			    padding: 11px 15px;
			 	text-align: right;
			}
			
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav hbg">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left colorw"></a>
		    <h1 class="mui-title" id="headerid">选择门店</h1>
		</header>
		<div class="mui-content">
			<div class="mui-input-row borbot" >
				<label>门店:</label>
	    		<div class="place items">
				    <button id='level' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">门店选择</button>
				</div>
			</div> 
			<div class="">
				<ul class="mui-table-view" id="ullist">
				    
				</ul>
			</div>
		    
		</div>
		<script src="../../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/mui.picker.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui.poppicker.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/req.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/muishow.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var type = 0,
			store_id = 0;	//门店id
			window.onload = function(){
				mui.init();
				type = getrequest().type;
				store();
				getemployeelist();
				if(type == 1){
					g("headerid").innerHTML = '项目提成汇总';
				}else{
					g("headerid").innerHTML = '员工提成明细';
				}
			}
			//获取门店列表
			function store(){
				var data = {
					url:"/api/store/lst",
					data:{
						access_token:acctoken(),
					}
				}
				ajax(data,function(res){
					console.log("门店列表",res)
					setpop(res.data)
				})
			}
			function setpop(list){
				var list1 = [];
				for(var i = 0; i < list.length; i++){
							var str = {value:list[i].id,text:list[i].store_name}
							list1.push(str);
				}
				var levelPicker = new mui.PopPicker();
                levelPicker.setData(list1);
                var level = document.getElementById('level');
                level.addEventListener('tap', function(event) {
                    levelPicker.show(function(items) {
                        level.innerText = items[0].text;
                        store_id = items[0].value;
                        //返回 false 可以阻止选择框的关闭
                        //return false;
                        getemployeelist();
                    });
                }, false);
			}
			
			function getemployeelist(){
				var data = {
					url:"/api/employee/lst",
					data:{
						access_token:acctoken(),
						store_id:store_id,
					}
				}
				ajax(data,function(res){
					console.log(res);
					setemployeelist(res.data.data)
				})
				
			}
			
			function setemployeelist(list){
				var str = '';
					for(var i = 0; i < list.length; i++){
						
					str += '<li class="mui-table-view-cell mui-media" onclick="gopage('+list[i].id+')">'+
				        '<a href="javascript:;">';
				        if(list[i].images&&list[i].images.path_name){
                    		str += '<img class="mui-media-object mui-pull-left border50" src="'+list[i].images.path_name+'"/></div>';
                    	}else{
                    		str += '<img class="mui-media-object mui-pull-left border50" src="../../images/user-photo.png"/></div>';
                    	}
				        //'<img class="mui-media-object mui-pull-left border50" src="../../images/user-photo.png">'+
				        str += '<div class="mui-media-body">'+
				        list[i].username+' | '+ list[i].job_number +
				        '<p class="mui-ellipsis">'+
				        list[i].phone+
				        '</p>'+
				        '</div></a></li>';
					}
					g("ullist").innerHTML = str;
			}
			
			function gopage(id){
				
				if(type == 1){
					mui.openWindow({
						url:'employeeDetails.html?id='+id+'&sid='+store_id,
						id:'employeeDetails',
					})
				}else if(type = 2){
					mui.openWindow({
					    url: 'employees.html?id='+id+'&sid='+store_id,
					    id: 'employees',
					});
				}
				
			}
			
		</script>
	</body>

</html>